<template>
	<view>
		<view class="header bg-main">
			<u-icon name="checkmark-circle-fill" color="#ffffff" size="140"></u-icon>
			<text class="u-font-36 u-m-t-10">回收成功</text>
		</view>
		<view class="list-box">
			<view class="list-bar"></view>
			<view class="list-content">
				<view class="linear-bg"></view>
				
				<view class="u-p-t-40 u-p-b-30">
					<view class="u-text-center">
						<text>支付金额</text>
					</view>
					<view class="money">
						<text class="u-font-24">￥</text><text class="u-font-80">{{orderForm.amount}}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="msg-box">
					<view class="section-head">
						<view class="u-p-30">
							<view class="blue-text"></view>
							<text class="u-font-32">回收品信息</text>
						</view>
					</view>
					<!-- 入库单详情展示回收品类 -->
					<view class="u-p-t-0 u-p-l-30 u-p-r-30 u-p-b-0">
						<table class="table">
							<tr class="tr">
								<th class="th">回收品类</th>
								<th class="th">单价</th>
								<th class="th">数量</th>
								<th class="th">金额</th>
							</tr>
							<template v-for="(item,index) in orderForm.details">
							<tr class="tr" v-for="(cell,i) in item.details" :key="i">
								<td class="td">{{cell.productname}}</td>
								<td class="td">{{cell.price}}</td>
								<td class="td">{{cell.weight}}{{cell.isweighing?'KG':'件'}}</td>
								<td class="td"><text class="price">{{cell.amount}}</text></td>
							</tr>
							</template>
						</table>
					</view>
				</view>
				<view class="msg-box">
					<view class="section-head">
						<view class="u-p-30">
							<view class="blue-text"></view>
							<text class="u-font-32">订单信息</text>
						</view>
					</view>
					<view class="u-p-l-30 u-p-r-30 u-p-b-30 u-p-t-0">
						<view class="item">
							<text class="label">订单编号：</text>
							<view class="text">{{orderForm.number}}</view>
						</view>
						<view class="item">
							<text class="label">回收完成：</text>
							<view class="text">{{orderForm.createddatetime}}</view>
						</view>
						<template v-if="orderForm.user">
							<!-- <view class="item">
								<text class="label">用户编号：</text>
								<view class="text">{{form.user.ysid}}</view>
							</view> -->
							<view class="item">
								<text class="label">用户名称：</text>
								<view class="text">{{orderForm.user.name}}</view>
							</view>
							<view class="item">
								<text class="label">用户手机：</text>
								<view class="text">{{orderForm.user.mobile}}</view>
							</view>
						</template>
						<template v-if="orderForm.enterprise">
							<!-- <view class="item">
								<text class="label">用户编号：</text>
								<view class="text">{{form.user.ysid}}</view>
							</view> -->
							<view class="item">
								<text class="label">客户组名称：</text>
								<view class="text">{{orderForm.enterprise.name}}</view>
							</view>
							<view class="item" v-if="orderForm.enterprise.department">
								<text class="label">客户组部门：</text>
								<view class="text">{{orderForm.enterprise.department}}</view>
							</view>
						</template>
						<!-- <view class="item">
							<text class="label">接待店员：</text>
							<view class="text">{{orderForm.staff.name}}</view>
						</view>
						<view class="item">
							<text class="label">联系电话：</text>
							<view class="text">{{orderForm.staff.mobile}}</view>
						</view> -->
						<view class="item">
							<text class="label">实付：</text>
							<view class="text">{{orderForm.amount}}元</view>
						</view>
						<view class="item">
							<text class="label">支付方式：</text>
							<view class="text">{{orderForm.payway}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-60" style="width: 640rpx;">
				<u-button @click="back">返回</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				orderForm:{
					user:{}
				}
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.orderView(this.id)
		},
		methods: {
			// 订单详情
			orderView(id){
				return this.$u.get('/User/Order/FITDetail?id='+id).then((res)=>{
					this.orderForm = res
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		padding: 60rpx 30rpx 60rpx 30rpx;
		/* #ifdef MP-WEIXIN */
		// padding-top: calc(44px + 80rpx + var(--status-bar-height));
		/* #endif */
		
	}
	.list-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -60rpx;
		.list-bar{
			width: 680rpx;
			height: 20rpx;
			background-color: #178174;
			border-radius: 40rpx;
			margin-top: 20rpx;
		}
		.list-content{
			position: relative;
			margin-top: -10rpx;
			background-color: #fff;
			width: 640rpx;
			// height: 400rpx;
			box-shadow: 0 0 6px #dbdbdb;
			.linear-bg{
				background-image: linear-gradient(to bottom,#30d9c5a1,#ffffff);
				height: 20rpx;
				position: absolute;
				width: 640rpx;
			}
			.money{
				font-size: 50rpx;
				font-weight: bold;
				text-align: center;
				line-height: 110rpx;
				color: $u-color-orange;
			}
			.line{
				position: relative;
				width: 640rpx;
				border-bottom: 1px dashed $u-border-color;
				&:after{
					content: '';
					width: 20rpx;
					height: 20rpx;
					border-radius: 20rpx;
					background-color: #f7f7f7;
					display: block;
					position: absolute;
					top: -10rpx;
					left: -10rpx;
				}
				&:before{
					content: '';
					width: 20rpx;
					height: 20rpx;
					border-radius: 20rpx;
					background-color: #f7f7f7;
					display: block;
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.msg-box{
		.item{
			// line-height: 2em;
		}
	}
	// 表格显示
	.table{
		width: 580rpx;
		border-spacing: 0;
		border-bottom: 1px solid $u-border-color;
		.tr{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10rpx;
			border: 1px solid $u-border-color;
			border-width: 0 1px 0 0;
			margin: 0;
			.th{
				height: 72rpx;
				line-height: 2em;
				flex: 1;
				border: 1px solid $u-border-color;
				border-width: 1px 0 0 1px;
				padding: 10rpx 0;
				background-color: $u-bg-color;
				font-size: 24rpx;
				text-align: center;
			}
			.td{
				height: 60rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				border: 1px solid $u-border-color;
				border-width: 1px 0 0 1px;
				padding: 5px 0;
				font-size: 28rpx;
			}
		}
	}
</style>
